#header,
#middle,
#footer {
  background-color: #64d878;
  border: 10px solid #ccc;
  width: 100%;
  /* 为页面的三个主要部分（头部、内容、底部）设置灰色边框 */

}

#header {
  flex: 1;
  display: flex;
  /* 视需求设置布局 */

}

#middle {
  height: 80px;
}

#footer {
  flex: 1;
}

html,
body {
  flex-direction: column;
  /*将子元素（头部、内容、底部）按垂直方向排列 */
  margin: auto;
  padding: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  /* 设置页面布局为flex容器 */
}

iframe {
  width: 100%;
  /* 让iframe的宽度占满父容器 */
  height: 100%;
  /* 让iframe的高度占满父容器 */
  border: none;
  /* 移除iframe的边框 */
}


/* 这段 CSS 代码为网页中的 body 元素定义了一些基本的样式，具体作用如下： */
/*font-family
含义：
-apple-system: macOS 和 iOS 的系统字体。
BlinkMacSystemFont: 旧版 macOS 和 Safari 的系统字体。
Segoe UI: Windows 系统的默认字体。
Roboto: Android 和 Google 产品的默认字体。
Helvetica, Arial, sans-serif: 通用字体备选项。
效果：
使页面在不同设备和系统上显示的文字风格更统一，且尽量使用系统默认字体，提供最佳性能和一致性。 */


/* margin: auto
水平方向居中页面内容。
配合 max-width，确保页面居中显示 */

/* max-width: 38rem
设置页面内容的最大宽度为 38rem。
rem 是相对单位，1 rem 通常等于根元素字体大小（默认为 16px），即这里的最大宽度是 38 * 16px = 608px。
效果：
限制页面宽度，避免内容在大屏幕上过宽，提升可读性。
页面在小屏幕（如手机）上会自动缩小以适应屏幕 */

/* padding: 2rem
为页面内容添加内边距，防止内容贴边，提升视觉效果和可读性。
上下左右均留出 2rem 的间距（约 32px）。 */